<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nine-gird</title>
    <script src="lib/d3.v7.min.js"></script>
    <style>
        .grid {
            display: grid;
            grid-template-columns: auto repeat(3, 1fr); /* Add an extra column for the labels */
            gap: 1px;
            height: 300px;
            width: 400px; /* Increase width to accommodate the label column */
            border: 1px solid #ccc;
        }

        .cell {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left; /* Default left alignment */
            position: relative;
        }

        .cell.center {
            text-align: center;
        }

        .header {
            font-weight: bold;
            border: none;
            background-color: #d8f8fb;
            padding: 5px;
        }

        .low {
            background-color: #b7f0fd;
        }

        .medium {
            background-color: #87dfff;
        }

        .high {
            background-color: #a6c8f5;
        }

        .badge {
            position: absolute;
            bottom: 5px;
            right: 5px;
        }

        .leftLabel {
            font-weight: bold;
            text-align: center;
            background-color: #fff;
            border: 1px solid #ccc;
        }

        .footer {
            width: 1%;
            text-align: center;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="container" id="container"></div>
<script>
    const headerText = "盘点信息（最近一次）";
    const leftLabels = ["优秀", "胜任", "部分胜任"];
    const data = [
        [{text: "潜水员 (5.5%) 苗晓玉", class: "high"}, {
            text: "潜力员工 (5.5%) 马丽莎",
            class: ""
        }, {text: "明星员工 (5.5%)", class: "high"}],
        [{text: "待提升 (5.5%)", class: ""}, {text: "中坚力量 (5.5%) 赵梅", class: ""}, {
            text: "业务骨干 (5.5%)",
            class: "medium center"
        }],
        [{text: "Loster (16.6%) 孙白", class: "low"}, {
            text: "短期力量 (16.6%) 赵大伟",
            class: "medium"
        }, {text: "贡献者 (16.6%)", class: "medium center"}]
    ];
    const footerLabels = ["低", "中", "高"];

    const container = d3.select("#container");

    // Add header
    container.append("div")
        .attr("class", "header")
        .text(headerText);

    // Add grid content
    const grid = container.append("div")
        .attr("class", "grid");

    leftLabels.forEach((label, i) => {
        grid.append("div")
            .attr("class", "cell leftLabel")
            .text(label);

        data[i].forEach(cell => {
            const cellDiv = grid.append("div")
                .attr("class", `cell ${cell.class}`)
                .text(cell.text);

            if (cell.class.includes("center")) {
                cellDiv.append("div")
                    .attr("class", "badge")
                    .text(""); // Add text or icon here if needed
            }
        });
    });

    // Add footer
    const footer = container.append("div")
        .attr("class", "footer");

    footerLabels.forEach(label => {
        footer.append("span")
            .text(label);
    });
</script>
</body>
</html>